<template>
  <view class="report-container">
    <view class="header">
      <text class="title">举报商品</text>
    </view>
    
    <view class="form-container">
      <!-- 举报类型选择 -->
      <view class="form-item">
        <text class="label">举报类型</text>
        <radio-group @change="handleReportTypeChange">
          <view class="radio-item" v-for="item in reportTypes" :key="item.value">
            <radio :value="item.value" :checked="reportType === item.value" color="#FF0036"/>
            <text class="radio-label">{{item.label}}</text>
          </view>
        </radio-group>
      </view>
      
      <!-- 举报详情 -->
      <view class="form-item">
        <text class="label">举报原因</text>
        <textarea 
          v-model="reason" 
          placeholder="请详细描述举报原因..." 
          class="reason-textarea"
          maxlength="500"
        ></textarea>
        <text class="word-count">{{reason.length}}/500</text>
      </view>
      
      <!-- 提交按钮 -->
      <button 
        class="submit-btn" 
        :disabled="!canSubmit" 
        :class="{disabled: !canSubmit}"
        @click="submitReport"
      >
        提交举报
      </button>
    </view>
  </view>
</template>

<script>
import { reportApi } from '@/api/report.js'

export default {
  data() {
    return {
      goodsId: null, // 从路由参数获取
      userId: null, // 从用户信息获取
      reportType: null,
      reason: '',
      reportTypes: [
        { value: 1, label: '禁售商品' },
        { value: 2, label: '政治敏感' },
        { value: 3, label: '有害信息' },
        { value: 4, label: '假货盗版' },
        { value: 5, label: '其他' }
      ],
      isSubmitting: false
    }
  },
  computed: {
    canSubmit() {
      return this.reportType && this.reason.trim().length > 0 && !this.isSubmitting
    }
  },
  onLoad(options) {
    this.goodsId = options.goodsId || null
    // 实际项目中应从全局状态获取用户ID
    this.userId = uni.getStorageSync('userId') || null
    
    if (!this.goodsId || !this.userId) {
      uni.showToast({
        title: '参数错误',
        icon: 'none'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  },
  methods: {
    handleReportTypeChange(e) {
      this.reportType = parseInt(e.detail.value)
    },
    
    async submitReport() {
      if (!this.canSubmit) return
      
      this.isSubmitting = true
      
      try {
        const reportData = {
          goodsId: this.goodsId,
          userId: this.userId,
          reportType: this.reportType,
          reason: this.reason
        }
        
        const res = await reportApi(reportData)
        
        if (res.code === 200) {
          uni.showToast({
            title: '举报成功',
            icon: 'success'
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        } else {
          uni.showToast({
            title: res.msg || '举报失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('举报出错:', error)
        uni.showToast({
          title: '举报出错，请重试',
          icon: 'none'
        })
      } finally {
        this.isSubmitting = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.report-container {
  padding: 20rpx 30rpx;
  
  .header {
    padding: 20rpx 0;
    
    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .form-container {
    margin-top: 20rpx;
    
    .form-item {
      margin-bottom: 40rpx;
      
      .label {
        display: block;
        font-size: 30rpx;
        color: #333;
        margin-bottom: 20rpx;
        font-weight: 500;
      }
      
      .radio-item {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        
        .radio-label {
          margin-left: 15rpx;
          font-size: 28rpx;
          color: #333;
        }
      }
      
      .reason-textarea {
        width: 100%;
        height: 200rpx;
        padding: 20rpx;
        border: 1rpx solid #eee;
        border-radius: 10rpx;
        background-color: #f9f9f9;
        font-size: 28rpx;
      }
      
      .word-count {
        display: block;
        text-align: right;
        font-size: 24rpx;
        color: #999;
        margin-top: 10rpx;
      }
    }
    
    .submit-btn {
      margin-top: 60rpx;
      background-color: #ff0036;
      color: #fff;
      border-radius: 50rpx;
      height: 90rpx;
      line-height: 90rpx;
      font-size: 32rpx;
      
      &.disabled {
        background-color: #ccc;
      }
    }
  }
}
</style>